<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 模板字符串；
        // ES5 :定义字符串 
        // var str = '我是字符串';
        // var str2 = "我是字符串";
        // 不支持换行
        // let str = "<div>"+
        //             "<p>我是内容</p>"+
        //         "</div>";
        // console.log(str);

        // 解析变量 
        // var myname = "张三";
        // var str = '我的名字是\''+myname+'\',我的年龄是20';
        // console.log(str);


        // ES6 模块字符串 ：定义字符串的。通过反引号定义 字符串 
        // 支持换行 
        // let str = `<div>
        //                 <p>我是内容</p>
        //           </div>`;
        // console.log(str);


        // 支持 插值表达式 ${变量}   解析变量
        // vue  {{变量}}  ${变量}  <%=变量 %>   react {变量}

        // var myname = "张三";
        // var str = `我的名字是"${myname}",我的年龄是20`;
        // console.log(str);

        // 插值表达式 可以接收的内容  ；

        // 1.直接写变量 ，解析变量
        // let myname = "张三";
        // let str = `我的名字是${myname},我的年龄是20`;
        // console.log(str);

        // 2. 接收简单的运算；
        // let str = `我的名字是${1+3+"hello"},我的年龄是20`;
        // console.log(str);

        // 3. 接收有返还值的逻辑；
        // if(true){
        //     console.log(111);
        // }

        // function fn(){
        //     return "hello";
        // }

        // let str = `我的名字是${fn()},我的年龄是20`;
        // console.log(str);

        // 三元运算符 
        // var flag = false;
        // var res = flag?"张三":"李四";
        // console.log(res);

        var flag = true;
        document.onclick = function(){
            flag = !flag;
            let str = `我的名字是${flag?"张三":"李四"}我的年龄是20`;
            console.log(str);
        }


    </script>
</body>
</html>